<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<div class="section text-center" th:fragment="classList">
    <div class="col-lg-10 col-lg-offset-1">
        <div class="row">

            <div class="col-lg-2 class-list">
<!--                /*@thymesVar id="categoryList" type="java.util.ArrayList<cn.hx.mall_goods.entity.ProductCategory>"*/-->
                <a class="col-lg-6 class-list-item"
                   th:each="category : ${categoryList}"
                   th:href="@{'/productList?categoryName='+${category.name}}"
                   th:text="${category.name}"
                    style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis"></a>
            </div>

            <div class="hero-slider swiper-container col-lg-8">
                <div class="swiper-wrapper">
                    <div class="hero-slide-item swiper-slide">
                        <div class="hero-slide-bg">
                            <img th:src="@{assets/images/slider/slider1-1.png}" alt="Slider Image" src=""/>
                        </div>
                        <div class="container">
                            <div class="hero-slide-content">
                                <h3 class="title m-0">获得30%折扣</h3>
                                <p>最新婴儿产品和玩具系列。</p>
                                <a th:href="@{shop.html}" class="btn btn-primary btn-hover-light">立即购买</a>
                            </div>
                        </div>
                    </div>

                    <div class="hero-slide-item swiper-slide">
                        <div class="hero-slide-bg">
                            <img th:src="@{assets/images/slider/slider1-2.png}" alt="Slider Image" src=""/>
                        </div>
                        <div class="container">
                            <div class="hero-slide-content">
                                <h3 class="title m-0">新品推荐 <br/>获得50%折扣</h3>
                                <a th:href="@{shop.html}" class="btn btn-primary btn-hover-light">立即购买</a>
                            </div>
                        </div>
                        <div class="col-md-2">ads</div>
                    </div>
                </div>
                <!-- Swiper Navigation Start -->
                <div class="home-slider-prev swiper-button-prev main-slider-nav d-md-flex d-none" tabindex="0"
                     role="button"
                     aria-label="Previous slide" aria-controls="swiper-wrapper-4779e6a2d2e3f163"><i
                        class="pe-7s-angle-left"></i></div>
                <div class="home-slider-next swiper-button-next main-slider-nav d-md-flex d-none" tabindex="0"
                     role="button"
                     aria-label="Next slide" aria-controls="swiper-wrapper-4779e6a2d2e3f163"><i
                        class="pe-7s-angle-right"></i></div>
                <!-- Swiper Navigation End -->
            </div>


            <div id="news" class="hero-slider col-lg-2" style="box-shadow: 0 0 5px #cecece;padding-bottom: 40px;height: 100%">

                <div style="height: 100%;margin-left: 8px">
                    <div style="height: 100%;float: left" class="n-display">
                        <div style="margin-top: 20px;width: 100%;height:33%;overflow: hidden">
                            <a href="#">
                                <img th:src="@{'assets\images\1.png'}" width="182px" alt="" src="">
                            </a>
                        </div>
                        <div style="margin-top: 20px;;width: 100%;height:33%;overflow: hidden">
                            <a href="#">
                                <img th:src="@{'assets\images\2.png'}" width="182px" alt="" src="">
                            </a>
                        </div>
                        <div style="margin-top: 20px;width: 100%;height:33%;overflow: hidden">
                            <a href="#">
                                <img th:src="@{'assets\images\3.png'}" width="182px" alt="" src="">
                            </a>
                        </div>
                    </div>
                    <div style="height: 100%;float: left" class="y-display">
                        <div style="margin-top: 20px;width: 100%;height:33%;overflow: hidden">
                            <a href="#">
                                <img th:src="@{'assets\images\4.png'}" width="182px" alt="" src="">
                            </a>
                        </div>
                        <div style="margin-top: 20px;;width: 100%;height:33%;overflow: hidden">
                            <a href="#">
                                <img th:src="@{'assets\images\5.png'}" width="182px" alt="" src="">
                            </a>
                        </div>
                        <div style="margin-top: 20px;width: 100%;height:33%;overflow: hidden">
                            <a href="#">
                                <img th:src="@{'assets\images\6.png'}" width="182px" alt="" src="">
                            </a>
                        </div>
                    </div>
                </div>


                <span style="margin-left: -33px!important;" class="home-slider-prev swiper-button-prev main-slider-nav d-md-flex d-none" tabindex="0"
                     role="button"
                     aria-label="Previous slide" aria-controls="swiper-wrapper-4779e6a2d2e3f163"><i
                        class="pe-7s-angle-left"></i></span>
                <span style="margin-right: -33px!important;" class="home-slider-next swiper-button-next main-slider-nav d-md-flex d-none" tabindex="0"
                     role="button"
                     aria-label="Next slide" aria-controls="swiper-wrapper-4779e6a2d2e3f163"><i
                        class="pe-7s-angle-right"></i></span>
            </div>

            <script th:src="@{'assets/js/jquery-3.6.1.js'}"></script>
            <script>
                $("#news span").bind("click",function (){
                    let divs = $("#news>div>div")
                    for (let i = 0; i < divs.length; i++) {
                        if($(divs[i]).css("display")==="block"){
                            $(divs[i]).css("display","none")
                        }else{
                            $(divs[i]).css("display","block")
                        }
                    }
                })
            </script>
        </div>
    </div>
</div>

</html>